<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>第一节课</title>
		<style type="text/css">
			/*去除原来样式*/
			
			* {
				padding: 0;
				margin: 0;
			}
			
			.container {
				width: 100vw;
				height: 100vh;
				display: flex;
				/*
				 * 将边框设置在中间
				 */
				align-items: center;
				justify-content: center;
			}
			
			canvas {
				width: 500px;
				height: 500px;
				border: 1px solid #333333;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<canvas id="canvas" width="500" height="500"></canvas>
		</div>
	</body>

	<script>
		
		window.onload = function() {
			//let oCanvas = document.getElementById('canvas');
			let oCanvas = document.getElementById("canvas");
			let oPen = oCanvas.getContext("2d");

			console.dir(oPen);

			/*//moveTo
			oPen.moveTo(3,3);
			//lineTo
			oPen.lineTo(497,497);*/

			//console.dir(oPen);

			//一个×
			/*oPen.moveTo(497,3);
			oPen.lineTo(3,497);*/

			//一个直角三角形
			/*oPen.moveTo(100,100);
			oPen.lineTo(400,400);
			oPen.lineTo(100,400);
			oPen.lineTo(100,100);*/

			//一个正方形
			/*oPen.moveTo(100,100);
			oPen.lineTo(100,400);
			oPen.lineTo(400,400);
			oPen.lineTo(400,100);
			oPen.lineTo(100,100);*/

			//五角星
			/*oPen.moveTo(66,500);
			oPen.lineTo(256,0);
			oPen.lineTo(432,500);
			oPen.lineTo(0,166);
			oPen.lineTo(500,166);
			oPen.lineTo(66,500);*/

			//渲染
			oPen.stroke();

			//边界颜色
			//oPen.strokeStyle = "chocolate";
			//填充颜色
			//oPen.fillStyle = "rgba(170,140,88,0.8)";
			//oPen.fillStyle = "darkcyan";

			//画矩形，参数：距离画布左边的位置，距离画布顶部的位置，宽度，高度
			//oPen.strokeRect(100, 200, 300, 150);

			//填充图形
			//oPen.fillRect(100, 200, 300, 150);

			//橡皮擦
			//oPen.clearRect(110, 190, 60, 80);
			
			//两个线交汇时会形成圆角
			oPen.lineJoin="round";
			oPen.lineWidth=20;
			oPen.moveTo(50,50);
			oPen.lineTo(100,50);
			oPen.lineTo(100,100);
			oPen.stroke();
			
			
			
			
			
		}
	</script>

</html>